<template>
    <div class="box-boder" :style="{height: height}">
        <div class="box-header">
          <i class="el-icon-s-tools"></i>
          <span>{{title}}</span>
          <i class="el-icon-s-tools"></i>
        </div>
        <slot name="content"></slot>
    </div>
</template>

<script>
export default {
    name:"BoxB",
    props:{
      title: { type: String, default:'标题' },
      height: { type: String, default:'306px' }
    }
}
</script>

<style scoped lang="scss">
.box-boder{
  width: 520px;
    height: 306px;
    // display: flex;
    flex-wrap: wrap;
    box-shadow: 0px -20px 16px 0px rgb(37 55 137 / 50%) inset;
    border-color: rgb(37, 55, 137);
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    background-clip: padding-box;
    background-size: 100% 100%;
    background-color: rgba(255, 255, 255, 0);
    background-image: initial;
    background-repeat: false;
    background-position: initial;
    padding: 20px;
    box-sizing: border-box;
}
.box-header{
  height: 30px;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #738AF3FF;
  span{
    font-weight: bold;
    font-size: 24px;
  }
  i{
    color: rgb(115 138 243);
    font-size: 20px;
  }
}

</style>